<template>
  <div class="compare-config">
    <div class="compare-config__item" v-for="(item, index) in compareList" :key="item.id">
      <span>{{ item.title }}</span>
      <el-button type="primary" link @click="handelSetItem(item, index)">设置</el-button>
    </div>

    <el-dialog v-model="isShowWhole" align-center title="整体优劣势对比" fullscreen width="800" :before-close="handleCloseWhole">
      <el-table :data="wholeTableData" style="width: 100%">
        <el-table-column label="对比维度" width="350">
          <template #default="{ row }">
            <el-input v-model="row.vdoing" placeholder="请输入对比维度" />
          </template>
        </el-table-column>
        <el-table-column label="详细说明">
          <template #default="{ row }">
            <WangEditorInput v-model="row.desc" />
            <!--            <el-input v-model="row.desc" type="textarea" maxlength="1000" show-word-limit placeholder="请输入详细说明" />-->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ $index }">
            <el-button type="danger" @click="handleDeleteWhole($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button :icon="Plus" type="primary" @click="handelWholeAdd">新增</el-button>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShowWhole = false">取消</el-button>
          <el-button type="primary" @click="handelSaveWhole"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="isShowOptionItem"
      align-center
      title="按选项优劣势对比"
      fullscreen
      width="1000"
      :before-close="handleCloseOption"
    >
      <el-table :data="options" style="width: 100%">
        <template v-for="(item, index) in tableHeader" :key="`${item}-${index}`">
          <el-table-column label="对比维度" width="200" v-if="item.prop === 'vdoing'">
            <template #default="{ row }">
              <el-input v-model.trim="row[item.prop]" placeholder="请输入对比维度" />
            </template>
          </el-table-column>
          <el-table-column v-else :label="item.label" min-width="1000">
            <template #default="{ row }">
              <WangEditorInput v-model="row[item.prop]" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ $index }">
            <el-button type="danger" @click="handleDeleteOption($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button :icon="Plus" type="primary" @click="handelOptionAdd">新增</el-button>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseOption">取消</el-button>
          <el-button type="primary" @click="handelSaveOption"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { cloneDeep } from "lodash";
import { Plus } from "@element-plus/icons-vue";
import WangEditorInput from "./editorInput";
import useFlowStore from "@/store/modules/gkflow.js";
import Templet from "@/views/products/selection/components/templet.vue";

const { proxy } = getCurrentInstance();

const flowStore = useFlowStore();
const defaultValue = {
  vdoing: "",
  desc: ""
};
const globalCompare = computed({
  get() {
    return flowStore.selectFormItem?.optionsConfig?.globalCompare ?? [{ ...defaultValue }];
  },
  set(val) {
    flowStore.selectFormItem.optionsConfig.globalCompare = val;
  }
});
const compareList = computed(() => {
  const list = flowStore.selectFormItem?.optionsConfig?.compareList ?? [];
  if (["SelectInput", "MultipleSelect"].includes(flowStore.selectFormItem?.name)) {
    return [...list, { id: "optionItem", title: "按选项优劣势对比" }];
  }
  return list;
});

/**
 * 切换组件设置
 * @param item
 * @param index
 */
const tableHeader = ref([
  {
    label: "对比维度",
    prop: "vdoing"
  }
]);
const tableOptionData = ref([]);
const handelSetItem = (item, index) => {
  if (item.id === "whole") {
    wholeTableData.value = cloneDeep(globalCompare.value);
    isShowWhole.value = true;
  }
  if (item.id === "optionItem") {
    isShowOptionItem.value = true;
    flowStore.selectFormItem?.props?.options?.forEach(item => {
      tableHeader.value.push({
        label: item,
        prop: item
      });
    });
    tableOptionData.value = flowStore.selectFormItem?.props?.options?.reduce((acc, curr) => {
      return { ...acc, [curr]: "" };
    }, {});
    options.value = cloneDeep(flowStore.selectFormItem.optionsConfig.optionCompare) ?? [];
  }
};

const isShowWhole = ref(false);
const wholeTableData = ref(cloneDeep(globalCompare.value));
const isDisabledDel = computed(() => {
  return wholeTableData.value.length < 2;
});
const handelWholeAdd = () => {
  wholeTableData.value.push(cloneDeep(defaultValue));
};
const handleDeleteWhole = index => {
  wholeTableData.value.splice(index, 1);
};
const handelSaveWhole = () => {
  const isPass = wholeTableData.value.some(item => {
    if (!item.vdoing) {
      proxy.$modal.msgError("请输入对比维度");
      return true;
    }
    if (!item.desc) {
      proxy.$modal.msgError("请输入详细说明");
      return true;
    }
  });
  if (isPass) return;
  globalCompare.value = cloneDeep(wholeTableData.value);
  console.log(wholeTableData.value, "<<<<整体优劣势对比");
  handleCloseWhole();
};
const handleCloseWhole = () => {
  isShowWhole.value = false;
  wholeTableData.value = [];
};

/**
 * 选项
 */
const isShowOptionItem = ref(false);
const options = ref([]);
const isDisabledOptionsDel = computed(() => {
  return options.value.length < 2;
});
const handelOptionAdd = () => {
  options.value.push({
    vdoing: "",
    ...tableOptionData.value
  });
  console.log(options.value, "<<<<选项优劣势对比");
};
const handleDeleteOption = index => {
  options.value.splice(index, 1);
};
const handleCloseOption = () => {
  isShowOptionItem.value = false;
  tableHeader.value = [
    {
      label: "对比维度",
      prop: "vdoing"
    }
  ];
  tableOptionData.value = [];
  options.value = [];
};
const handelSaveOption = () => {
  const keys = Object.keys(options.value?.length ? options.value[0] : {});
  const isPass = options.value.some(item => {
    return keys.some(key => {
      if (!item[key]) {
        const msg = key === "vdoing" ? "请输入对比维度" : `请输入【${key}】详细说明`;
        proxy.$modal.msgError(msg);
        return true;
      }
    });
  });
  if (isPass) return;
  flowStore.selectFormItem.optionsConfig.optionCompare = cloneDeep(options.value);
  handleCloseOption();
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.compare-config {
  &__item {
    @include flex-center(space-between);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    & + .compare-config__item {
      margin-top: 10px;
    }
  }
}
</style>
